<template>
  <div class="box">
    <el-form :model="form" label-width="120px" label-position="top">
      <el-form-item label="房间名称">
        <el-input v-model="form.name" size="large" />
      </el-form-item>
      <!-- 房间信息 -->
      <el-form-item>
        <el-form :model="form" label-width="120px" :inline="true" label-position="top">
          <el-form-item label="房间价格">
            <el-input-number v-model="form.price" :precision="2" :step="10" />
          </el-form-item>
          <el-form-item label="卧室数量">
            <el-input-number v-model="form.bedroom" :min="1" :step="1" controls-position="right" />
          </el-form-item>
          <el-form-item label="卫生间数量">
            <el-input-number v-model="form.toilet" :min="0" :step="1" controls-position="right" />
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 图片上传 -->
      <el-form-item label="图片上传区">
        <el-upload
          v-model:file-list="fileList"
          action=""
          :multiple="true"
          :auto-upload="false"
          name="pic"
          :limit="5"
          list-type="picture-card"
          :on-change="change"
          :on-preview="handlePictureCardPreview"
        >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="房间简介">
        <el-input
          v-model="form.info"
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 6 }"
          placeholder="请输入内容...."
        />
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="form.updateTime"
          type="date"
          placeholder="Pick a day"
          size="large"
        />
      </el-form-item>
      <el-form-item label="房间服务" prop="type">
        <el-checkbox
          v-model="form.washer"
          :true-label="1"
          :false-label="0"
          label="洗衣机"
          size="large"
        />
        <el-checkbox
          v-model="form.air"
          :true-label="1"
          :false-label="0"
          label="空调"
          size="large"
        />
        <el-checkbox
          v-model="form.wifi"
          :true-label="1"
          :false-label="0"
          label="无线网络"
          size="large"
        />
        <el-checkbox
          v-model="form.pojector"
          :true-label="1"
          :false-label="0"
          label="投影仪"
          size="large"
        />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="form.hot">
          <el-radio :label="1">首页推荐</el-radio>
          <el-radio :label="0">不推荐</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onSubmit" class="btn">上传数据</el-button>
  </div>
</template>

<script lang="ts" setup>
import axios from '@/utils/request'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { reactive, ref } from 'vue'
const form = reactive({
  name: '',
  info: '',
  price: 100,
  capacity: 2,
  bedroom: 1,
  toilet: 1,
  hot: 0,
  air: 1,
  washer: 0,
  wifi: 1,
  pojector: 0,
  updateTime: '',
})
const photo = ref<any>([])
const fileList = ref<UploadUserFile[]>()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const onSubmit = async () => {
  try {
    const formData = new FormData()
    for (const k in form) {
      console.log(k, typeof (form as any)[k])

      formData.append(k, (form as any)[k])
    }
    photo.value.forEach((item: { raw: string | Blob }) => {
      formData.append('photo', item.raw)
    })
    ;(await axios({
      url: 'https://www.tinyxu.fun/v1/room',
      method: 'post',
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' },
    })) as any
    ElMessage.success('上传成功')
  } catch (error) {
    console.log(error)
    ElMessage.error('出错了!上传失败')
  }
}

const change = async (file: any, files: any[]) => {
  photo.value = files
}
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>
<style lang="less" scoped>
.box {
  @media screen and (max-width: 1200px) {
    width: 100%;
    border-radius: 8px !important;
  }
  width: 70%;
  box-sizing: border-box;
  position: relative;
  .btn {
    width: 200px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    left: 200px;
  }
}
</style>
